<!-- @author zhengjie -->
<template>
    <div class="icon-body">
        <div class="fifter-box">
            <el-input
                v-model="fifterValue"
                style="position: relative;"
                clearable
                placeholder="请输入图标名称"
                @clear="filterIcons"
                @input.native="filterIcons"
            >
                <i slot="suffix" class="el-icon-search el-input__icon"></i>
            </el-input>
        </div>
        <div class="icon-box">
            <el-tabs type="border-card" v-model="icontType" @tab-click="reset">
                <el-tab-pane label="svg图标" name="svg">
                    <div class="icon-list">
                        <div
                            v-for="(item, index) in svgIconList"
                            :key="index"
                            @click="selectedIcon(item)"
                            class="icon-item"
                            :class="checkedName === item ? 'active' : ''"
                        >
                            <svg-icon :icon-class="item" class="icon" />
                            <span class="text">{{ item }}</span>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="IconFont图标" name="iconfont">
                    <div class="icon-list">
                        <div
                            v-for="(value, key, index) in fontIconList"
                            :key="index"
                            @click="selectedIcon(value)"
                            class="icon-item"
                            :class="
                                checkedName === value.className ? 'active' : ''
                            "
                        >
                            <span :class="value.className" class="icon"></span>
                            <span class="text">{{ key }}</span>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div class="checked-icon">
            <span v-if="icontType === 'svg'">
                <svg-icon :icon-class="checkedName" class="icon" />
                <span class="label"> {{ checkedName }}</span>
            </span>
            <span v-if="icontType === 'iconfont'">
                <span :class="checkedName" class="icon"></span>
                <span class="label"> {{ checkedName }}</span>
            </span>
            <el-button
                type="primary"
                :disabled="checkedName ? false : true"
                @click="handelCheckedIcon()"
                >确定</el-button
            >
        </div>
    </div>
</template>
<script>
import { svgIcons, fontIcons } from './requireIcons'
export default {
    name: 'IconSelect',
    data() {
        return {
            fifterValue: '',
            svgIconList: svgIcons,
            fontIconList: fontIcons,
            // 图标类型
            icontType: 'svg',
            // 选中的图标名称
            checkedName: ''
        }
    },
    methods: {
        filterIcons() {
            this.svgIconList = svgIcons
            this.fontIconList = fontIcons
            if (this.fifterValue) {
                if (this.icontType === 'svg') {
                    this.svgIconList = this.svgIconList.filter(item =>
                        item.includes(this.fifterValue)
                    )
                } else if (this.icontType === 'iconfont') {
                    let newObj = {}
                    for (const key in this.fontIconList) {
                        if (
                            this.fontIconList[key].className.includes(
                                this.fifterValue
                            )
                        ) {
                            newObj[key] = this.fontIconList[key]
                        }
                    }
                    this.fontIconList = newObj
                }
            }
        },
        selectedIcon(item) {
            if (this.icontType === 'svg') {
                if (item === this.checkedName) {
                    this.checkedName = ''
                } else {
                    this.checkedName = item
                }
            } else if (this.icontType === 'iconfont') {
                if (item.className === this.checkedName) {
                    this.checkedName = ''
                } else {
                    this.checkedName = item.className
                }
            }
        },
        // 确定选择
        handelCheckedIcon() {
            this.$emit('CheckedIcon', this.checkedName)
        },
        reset() {
            this.fifterValue = ''
            this.checkedName = ''
            this.svgIconList = svgIcons
            this.fontIconList = fontIcons
        }
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.icon-body {
    @include box_flex(
        $width: 100%,
        $height: 60vh,
        $direction: column,
        $justify: flex-start,
        $align: center
    );

    max-height: 60vh;
    .fifter-box {
        @include box_flex(
            $width: 100%,
            $height: auto,
            $direction: row,
            $justify: flex-start,
            $align: center
        );

        margin-bottom: 10px;
    }
    .icon-box {
        @include box_flex(
            $width: 100%,
            $height: auto,
            $direction: row,
            $justify: flex-start,
            $align: center,
            $flex-1: 1
        );
        .icon-list {
            @include box_flex(
                $width: 100%,
                $height: 100%,
                $direction: row,
                $justify: space-between,
                $align: flex-start,
                $flex-wrap: wrap
            );

            overflow-y: auto;
            .icon-item {
                @include box_flex(
                    $width: 125px,
                    $height: auto,
                    $direction: column,
                    $justify: flex-start,
                    $align: center
                );
                @include background_color('info');
                @include font_color('cover3');

                cursor: pointer;
                margin: 10px;
                padding: 10px 0;
                .icon {
                    margin-bottom: 10px;
                    font-size: 24px;
                }
                .text {
                    padding: 5px 0;
                    font-size: 12px;
                }
                &:hover {
                    @include background_color('info-light1');
                }
            }
            .icon-item.active {
                @include background_color('primary');
                @include font_color('color-w');
            }
        }
    }
    .checked-icon {
        @include box_flex(
            $width: 100%,
            $height: auto,
            $direction: row,
            $justify: flex-start,
            $align: center
        );

        padding: 10px 0;
        > span {
            @include box_flex(
                $width: 100%,
                $height: auto,
                $direction: row,
                $justify: flex-start,
                $align: center
            );
        }
        .icon {
            margin-right: 20px;
            font-size: 24px;
        }
    }
}
</style>
